Flex 布局是轴线布局,只能指定”项目”针对轴线的位置,可以看作是一维布局。Grid 布局则是将容器划分成”行”和”列”,产生单元格,然后指定”项目所在”的单元格,可以看作是二维布局。Grid 布局远比 Flex 布局强大。
与flex布局一样,采用grid布局的Dom称为容器,容器内部的直接子元素称为项目item
容器里水平区域称为行,垂直区域称为列,行列的交叉区域称为单元格（table类似）
容器属性
display:grid
grid: grid-template || auto-flow (dense) (grid-auto-rows) / grid-template-columns || grid-template-rows / auto-flow (dense) (grid-auto-columns)
grid-template-columns: 规定每一列的列宽,项目宽度,定义后必须一一指定
grid-template-rows: 规定每一行的行高,项目高度
repeat(6,100px 500px) 重复模板
auto-fill 在项目大小确定,但是容器宽高可变时使用,替代repeat第一个参数
fr 相对大小,与flex shink grow类似
minmax(min,max) 规定最大最小值
min-content 按最小内容创建
max-content 按最大内容创建
fit-content == minmax(auto, max-content) 适应内容
auto 自动计算
row-gap:设置行间隔,不必一一指定每个间隔
column-gap:设置行间隔,不必一一指定每个间隔
gap: row-gap column-gap
grid-template-areas: 'a b c'
'd e f'
'g h i'
grid-auto-flow:项目排列顺序,默认先行后列row,先列后行column
justify-items: start | end | center | (stretch)(默认值) 设置所有项目位置
align-items: start | end | center | (stretch)
place-items: align-items justify-items
justify-content: start | end | center | (stretch) | space-around | space-between | space-evenly 设置整个容器位置
align-content: start | end | center | (stretch) | space-around | space-between | space-evenly
place-content: align-content justify-content
grid-auto-columns grid-auto-rows: min-content | max-content | auto | num(自定义) | minmax
项目属性
设置项目起始网格位置
grid-column start / end
grid-column-start属性: 开始的垂直网格线
grid-column-end属性: 结束的垂直网格线
grid-row start / end
grid-row-start属性:开始的水平网格线
grid-row-end属性:结束的水平网格线
span 表示跨越的网格线数量
例子:grid-column-start: span 2
grid-area: d 指定项目放在某个单元格,与容器属性配合使用 | <row-start> / <column-start> / <row-end> / <column-end> 指定项目位置
(grid-template-areas: 'a b c'
'[d] e f'
'g h i')
justify-self: start | end | center | (stretch) 设置单个项目水平位置
align-self: start | end | center | (stretch) 设置单个项目垂直位置
place-self: align-self justify-self